<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

		<link rel="stylesheet" href="../../../static/manage/common/bootstrap/css/bootstrap.min.css" />
		<script type="text/javascript" src="../../../static/manage/common/js/jquery-3.2.0.min.js"></script>
		<script type="text/javascript" src="../../../static/manage/common/bootstrap/js/bootstrap.min.js"></script>

		<link rel="stylesheet" href="../../../static/manage/common/bootstarp-table-1.11.1/bootstrap-table.min.css" />
		<script type="text/javascript" src="../../../static/manage/common/bootstarp-table-1.11.1/bootstrap-table.min.js"></script>
		<script type="text/javascript" src="../../../static/manage/common/bootstarp-table-1.11.1/bootstrap-table-zh-CN.min.js"></script>

		<script type="text/javascript">
			
			$(function() {

				//				alert("json");

				//1.初始化Table

				var oTable = new TableInit();

				oTable.Init();

				
			});

			var TableInit = function() {
				var oTableInit = new Object();
				//初始化Table
				oTableInit.Init = function() {

					$('#t').bootstrapTable({

						method: 'get',
						contentType: "application/x-www-form-urlencoded",
						url: "/customuser/custom", //请求后台的URL（*）
						striped: true, //是否显示行间隔色
						locale: 'zh-CN', //中文支持
						pagination: true, //是否开启分页（*）
						pageNumber: 1, //初始化加载第一页，默认第一页
						pageSize: 5, //每页的记录行数（*）
						pageList: [5, 7, 9], //可供选择的每页的行数（*） 
						sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
						showRefresh: true, //刷新按钮
						queryParams: oTableInit.queryParams, //传递参数（*）
						strictSearch: true,
						showColumns: true, //是否显示所有的列
						minimumCountColumns: 2, //最少允许的列数
						clickToSelect: true, //是否启用点击选中行

						columns: [{
								field: 'photo',
								title: '头像',
								align: 'center',
								formatter: function(value, row, index) {
									return '<img src="img/'+row.photo+'" width="80px" height="80px" class="img-rounded" />';
								}
						},{
								field: 'custom_user_id',
								title: '会员号',
								align: 'center',
								valign:'middle'
						},{
								field: 'mobile',
								title: '手机',
								align: 'center',
								valign:'middle'
						},{
								field: 'username',
								title: '姓名',
								align: 'center',
								valign:'middle'
						},{
								field: 'nikename',
								title: '昵称',
								align: 'center',
								valign:'middle'
						}, {
								field: 'sex',
								title: '性别',
								align: 'center',
								valign:'middle',
								formatter: function(v, r, i) {
									switch(Number(v)) {
										case 1:
											return "男";
											break;
										case 2:
											return "女";
											break;
										case 3:
											return "保密";
											break;
									}
								}
							}, {
//								field: 'shop_name',
//								title: '商店名称',
//								align: 'center',
//								valign:'middle'
//							}, {
								field: 'wechat_status',
								title: '微信状态',
								align: 'center',
								valign:'middle',
								formatter: function(v, r, i) {
									switch(Number(v)) {
										case 1:
											return "未订阅";
											break;
										case 2:
											return "已订阅";
											break;
										case 3:
											return "已退订";
											break;
									}
								}
							}, {
								field: 'qq',
								title: 'QQ',
								align: 'center',
								valign:'middle'
							}, {
								field: 'email',
								title: '邮箱',
								align: 'center',
								valign:'middle'
							}, {
								field: 'born_date',
								title: '出生日期',
								align: 'center',
								valign:'middle',
								formatter: function (value, row, index) {
									return RiQi(value);
								}
							}, {
								field: 'recent_time',
								title: '最近到店时间',
								align: 'center',
								valign:'middle',
								formatter: function (value, row, index) {
									return RiQi(value);
								}
							}, {
								field: 'enroll_mode',
								title: '注册方式',
								align: 'center',
								valign:'middle',
								formatter: function(v, r, i) {
									switch(Number(v)) {
										case 1:
											return "微信";
											break;
										case 2:
											return "商家";
											break;
										case 3:
											return "后台";
											break;
									}
								}
							},{
								title: '操作', 
								align: 'center',
								valign: 'middle',
								formatter:function(value,row,index){
									return "<button class='btn btn-success' data-toggle='modal' data-target='#myModal2' onclick='update("+row.custom_user_id+")'>修改</button>&nbsp;&nbsp;<button class='btn btn-danger' onclick='del("+row.custom_user_id+")'>删除</button>&nbsp;&nbsp;<button class='btn btn-warning' data-toggle='modal' data-target='#myModal3' onclick='look("+row.custom_user_id+")'>查看详情 </button>"
								}
							}
						]

					});

				};

				//得到查询的参数
				oTableInit.queryParams = function(params) {
					var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
						limit: params.limit, //页面大小
						offset: params.offset, //偏移量
						mobile: $("#mobile").val(),
						username: $("#username").val(),
						custom_user_id: $("#custom_user_id").val(),
						nikename: $("#nikename").val(),
//						shop_name: $("#shop_name").val(),
						enroll_mode: $("#enroll_mode").val(),
						wechat_status: $("#wechat_status").val(),
//						recent_time: $("#recent_time").val()
					};
					return temp;
				};
				return oTableInit;
			};
			
			//时间戳转时间
		    function RiQi(sj){
		        var now = new Date(sj);
		        var   year=now.getFullYear();
		        var   month=now.getMonth()+1;
		        var   date=now.getDate();
		        var   hour=now.getHours();
		        var   minute=now.getMinutes();
		        var   second=now.getSeconds();
		        return   year+"-"+month+"-"+date+"   "+hour+":"+minute+":"+second; 
		    }
		    
		    //店铺名称下拉框
		    $.ajax({
				type: "get",
				url: "/customuser/shopname",
				success: function(data) {
					var items = data.rows;
					console.log('======='+items);
					for(i = 0; i < items.length; i++) {
						$("#shop_name").append("<option value='" + items[i].shop_name+ "'>" + items[i].shop_name + "</option>");
					}
				}
			})
		    // 最近到店时间
//			$.ajax({
//				type: "get",
//				url: "/customuser/recenttime" ,
//				success: function(data) {
//					var items = data.rows;
//					console.log('======='+items);
//					for(i = 0; i < items.length; i++) {
//						$("#recent_time").append("<option value='" + items[i].recent_time + "'>" + items[i].recent_time + "</option>");
//					}
//				}
//			})
		    
		    //模糊查询
			function select(){
				$("#t").bootstrapTable("refresh")
			}
			
			//添加
			$("#addbtn").click(function () {
				$("#t").bootstrap("refresh");
				$("#fo").submit();
				$("#myModal").modal("hide");
			})

			//删除
			function del (custom_user_id) {
				alert(custom_user_id)
				$.ajax({
					type:"post",
					url:"/customuser/del/"+custom_user_id,
					success:function () {
						$('#t').bootstrapTable("refresh");
						$("#myModal").modal("hide")
					}
				});
			}
			
			//修改
			function update (custom_user_id) {
				$.ajax({
					type:"post",
					url:"/customuser/update/"+custom_user_id,
					success:function(data){
						$("#custom_user_id2").val(data.custom_user_id)
						$("#photo3").attr("src",data.photo);
						$("#photo3").val(data.photo);
						$("#mobile2").val(data.mobile);
						$("#username2").val(data.username);
						$("#nikename2").val(data.nikename);
						$("#sex2").val(data.sex);
						$("#phone2").val(data.phone);
						$("#address2").val(data.address);
						$("#qq2").val(data.qq);
						$("#email2").val(data.email);
						$("#born_date2").val(changeDateFormat(data.born_date));
						$("#remark2").val(data.remark);
						
						$("#t").bootstrapTable("refresh");
					}
				});
			}
			
			
			function dian(){
				var file=$("#file").val();
				alert(file)
				$("#photo1").val(file)
				$("#photo4").val(file)
			}
			//查看详情
			function look (custom_user_id) {
				$.ajax({
					type:"post",
					url:"/customuser/findCustomerById/"+custom_user_id,
					success:function(data){
						alert(data)
						$("#photo4").attr("src",data.photo);
						$("#mobile3").val(data.mobile);
						$("#username3").val(data.username);
						$("#nikename3").val(data.nikename);
						$("#sex3").val(data.sex);
						$("#phone3").val(data.phone);
						$("#address3").val(data.address);
						$("#qq3").val(data.qq);
						$("#email3").val(data.email);
						$("#born_date3").val(data.born_date);
						$("#openid1").val(data.openid);
						$("#wechat_status1").val(data.wechat_status);
						$("#enroll_mode1").val(data.enroll_mode);
						$("#enroll_time1").val(changeDateFormat(data.enroll_time));
						$("#remark3").val(data.remark);
						
//						$("#t").bootstrapTable("refresh");
//						$("#myModal3").modal("hide")
						
					}
				});
			}
		</script>
</head>

	<body>
		<!--系统管理--用户管理界面模糊查询-->
		<form class="form-inline">
			<div class="form-group">
				<label for="account" class="control-label">手机</label>
				<input type="text" class="form-control" id="mobile" placeholder="请输入手机">
			</div>
			<div class="form-group">
				<label for="account" class="control-label">姓名</label>
				<input type="text" class="form-control" id="username" placeholder="请输入姓名">
			</div>
			<div class="form-group">
				<label for="account" class="control-label">会员号</label>
				<input type="text" class="form-control" id="custom_user_id" placeholder="请输入会员号">
			</div>
			<div class="form-group">
				<label for="account" class="control-label">昵称</label>
				<input type="text" class="form-control" id="nikename" placeholder="请输入昵称">
			</div>
			<br />
			<br />
			<!--<div class="form-group">
				<label for="account" class="control-label">商店名称</label>
				<select class="form-control" id="shop_name" name="shop_name">
					<option value=""></option>
				</select>
			</div>-->
			<div class="form-group">
				<label for="account" class="control-label">注册方式</label>
				<select class="form-control" id="enroll_mode" name="enroll_mode">
					<option value=""></option>
					<option value="1">微信</option>
					<option value="2">商家</option>
					<option value="3">后台</option>
				</select>
			</div>
			<div class="form-group">
				<label for="account" class="control-label">微信状态</label>
				<select class="form-control" id="wechat_status" name="wechat_status">
					<option value=""></option>
					<option value="1">未订阅</option>
					<option value="2">已订阅</option>
					<option value="3">已退订</option>
				</select>
			</div>
			<!--<div class="form-group">
				<label for="account" class="control-label">最近到店时间</label>
				<select class="form-control" id="recent_time" name="recent_time">
					<option value=""></option>
					<option value="1">一个月未到店</option>
					<option value="2">两个月未到店</option>
					<option value="3">三个月未到店</option>
					<option value="4">半年未到店</option>
					<option value="5">一年未到店</option>
				</select>
			</div>-->
			
			<button type="button" class='btn btn-success' onclick="select()">查询</button>
			<button type="reset" class="btn btn-primary">重置</button>
		</form>
		<br>
		
		<button id="ad" data-toggle="modal" data-target="#myModal" type="button" class="btn btn-info">新增</button>
		
		<br><br>
		
		<table id="t">
			
		</table>
		
		<!--添加的模态框-->
		<!-- Modal -->
		<form class="form-horizontal" name="myform1" id="fo" accept-charset="UTF-8" action="/customuser/add" method="post" enctype="multipart/form-data">
			<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							<h4 class="modal-title" id="myModalLabel">添加</h4>
						</div>
						<div class="modal-body" id="">
							<!--添加form表单-->
							
								<div class="form-group">
									<div class="col-sm-5">
									    <label for="exampleInputFile">头像</label>
									    <input type="file" class="form-control" onmouseout="dian()" id="file" name="file">
								   		<input type="hidden" class="form-control" id="photo1" name="photo">
									</div>
								</div>
								
								<div class="form-group">
									<div class="col-sm-5">
										<label for="exampleInputRemark">会员号</label>
										<input type="text" class="form-control" id="custom_user_id" name="custom_user_id" placeholder="请输入会员号">
									</div>
									<div class="col-sm-5">
										<label for="exampleInputSort_no">手机</label>
										<input type="text" class="form-control" id="mobile" name="mobile" placeholder="请输入手机号">
									</div>
								</div>
								
								<div class="form-group">
									<div class="col-sm-5">
										<label for="exampleInputSort_no">姓名</label>
										<input type="text" class="form-control" id="username" name="username" placeholder="请输入姓名">
									</div>
									<div class="col-sm-5">
										<label for="exampleInputSort_no">昵称</label>
										<input type="text" class="form-control" id="nikename" name="nikename" placeholder="请输入昵称">
									</div>
								</div>
								<div class="form-group">
									<div class="col-sm-5">
										<label for="exampleInputSort_no">性别</label>
										<select class="form-control" id="sex" name="sex">
											<option value=""></option>
											<option value="1">男</option>
											<option value="2">女</option>
											<option value="3">保密</option>
										</select>
									</div>
									<div class="col-sm-5">
										<label for="exampleInputSort_no">电话</label>
										<input type="text" class="form-control" id="phone" name="phone" placeholder="请输入电话">
									</div>
								</div>
								<div class="form-group">
									<div class="col-sm-5">
										<label for="exampleInputSort_no">通信地址</label>
										<input type="text" class="form-control" id="address" name="address" placeholder="请输入通信地址">
									</div>
									<div class="col-sm-5">
										<label for="exampleInputSort_no">QQ</label>
										<input type="text" class="form-control" id="qq" name="qq" placeholder="请输入QQ">
									</div>
								</div>
								<div class="form-group">
									<div class="col-sm-5">
										<label for="exampleInputSort_no">邮箱</label>
										<input type="text" class="form-control" id="email" name="email" placeholder="邮箱">
									</div>
									<div class="col-sm-5">
										<label for="createtime">出生日期</label>
										<input type="date" class="form-control" id="born_date" name="born_date">
									</div>
								</div>
								<div class="form-group">
									<div class="col-sm-10">
										<label for="exampleInputSort_no">备注</label>
										<textarea class="form-control" rows="3" id="remark" name="remark" placeholder="请输入备注"></textarea>
									</div>
								</div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
							<button type="submit"  class="btn btn-primary" id="addbtn">添加</button>
						</div>
					</div>
				</div>
			</div>
		</form>
		
		<!--修改的模态框-->
		<!-- Modal -->
		<form class="form-horizontal" name="myform1" accept-charset="UTF-8" action="/customuser/up" method="post" enctype="multipart/form-data" id="fo2">
		<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="myModalLabel">修改</h4>
					</div>
					<div class="modal-body">
							
						<!--修改form表单-->
							<div class="form-group">
								<div class="col-sm-5">
								    <label for="exampleInputFile">头像</label>
								    <span class=""><img src="" id="photo3" width="70" height="70" /> </span>
								    <input type="hidden" class="form-control" id="custom_user_id2" name="custom_user_id">
								    <input type="file" class="form-control" id="photo2" name="file">
							    </div>
								<div class="col-sm-5">
									<label for="exampleInputSort_no">手机</label>
									<input type="text" class="form-control" id="mobile2" name="mobile">
								</div>
							</div>
							<div class="form-group">
								<div class="col-sm-5">
									<label for="exampleInputSort_no">姓名</label>
									<input type="text" class="form-control" id="username2" name="username">
								</div>
								<div class="col-sm-5">
									<label for="exampleInputSort_no">昵称</label>
									<input type="text" class="form-control" id="nikename2" name="nikename">
								</div>
							</div>
							<div class="form-group">
								<div class="col-sm-5">
									<label for="exampleInputSort_no">性别</label>
									<select class="form-control" id="sex2" name="sex">
										<option value="0"></option>
										<option value="1">男</option>
										<option value="2">女</option>
										<option value="3">保密</option>
									</select>
								</div>
								<div class="col-sm-5">
									<label for="exampleInputSort_no">电话</label>
									<input type="text" class="form-control" id="phone2" name="phone">
								</div>
							</div>
							<div class="form-group">
								<div class="col-sm-5">
									<label for="exampleInputSort_no">通信地址</label>
									<input type="text" class="form-control" id="address2" name="address">
								</div>
								<div class="col-sm-5">
									<label for="exampleInputSort_no">QQ</label>
									<input type="text" class="form-control" id="qq2" name="qq">
								</div>
							</div>
							<div class="form-group">
								<div class="col-sm-5">
									<label for="exampleInputSort_no">邮箱</label>
									<input type="text" class="form-control" id="email2" name="email">
								</div>
								<div class="col-sm-5">
									<label for="createtime">出生日期</label>
									<input type="date" class="form-control" id="born_date2" name="born_date">
								</div>
							</div>
							<div class="form-group">
								<div class="col-sm-10">
									<label for="exampleInputSort_no">备注</label>
									<textarea class="form-control" rows="3" id="remark2" name="remark"></textarea>
								</div>
							</div>
						
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
						<button type="submit"  class="btn btn-primary">保存</button>
					</div>
				</div>
			</div>
		</div>
		</form>
		<!-- 查看详情 (基本信息) Modal -->
		<form class="form-horizontal" name="myform1" accept-charset="UTF-8" action="/customuser/findCustomerById" method="post" enctype="multipart/form-data" id="fo3">
		<div class="modal fade bs-example-modal-lg" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
        <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
        	<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="myModalLabel">查看详情</h4>
			</div>
        	<table class="table table-bordered">
 				 <tr height="70px" >
 				 	<td>
 				 		<label >手机:</label>
 				 	</td>
 				 	<td>
 				 		<input type="hidden" class="form-control" id="custom_user_id3" name="custom_user_id" >
 				 		<input type="text" class="form-control" id="mobile3" name="mobile" placeholder="" align="center">
 				 	</td>
 				 	<td align="right">
 				 		<label for="accountT">头像:</label>
 				 	</td>
 				 	<td>
 				 		<span class=""><img src="" id="photo4" width="140" height="120" /> </span>
 				 		
 				 	</td>
 				 </tr>
 				 <tr>
 				 	<td align="right">
 				 		<label for="accountT">姓名:</label>
 				 	</td>
 				 	<td>
 				 		<input type="text" class="form-control" id="username3" name="username" placeholder="">
 				 	</td>
 				 	<td align="right">
 				 		<label for="accountT">性别:</label>
 				 	</td>
 				 	<td>
 				 		<select class="form-control" id="sex3" name="sex">
							<option value="0"></option>
							<option value="1">男</option>
							<option value="2">女</option>
							<option value="3">保密</option>
						</select>
 				 	</td>
 				 </tr>
 				 <tr>
 				 	<td align="right">
 				 		<label for="accountT">昵称:</label>
 				 	</td>
 				 	<td>
 				 		<input type="text" class="form-control" id="nikename3" name="nikename" placeholder="">
 				 	</td>
 				 	<td align="right">
 				 		<label for="accountT">出生日期:</label>
 				 	</td>
 				 	<td>
 				 		<input type="date" class="form-control" id="born_date3" name="born_date" placeholder="">
 				 	</td>
 				 </tr>
 				 <tr>
 				 	<td align="right">
 				 		<label for="accountT">电话:</label>
 				 	</td>
 				 	<td>
 				 		<input type="text" class="form-control" id="phone3" name="phone" placeholder="">
 				 	</td>
 				 	<td align="right">
 				 		<label for="accountT">QQ:</label>
 				 	</td>
 				 	<td>
 				 		<input type="text" class="form-control" id="qq3" name="qq" placeholder="">
 				 	</td>
 				 </tr>
 				 <tr>
 				 	<td align="right">
 				 		<label for="accountT">邮箱:</label>
 				 	</td>
 				 	<td>
 				 		<input type="text" class="form-control" id="email3" name="email"placeholder="">
 				 	</td>
 				 	<td align="right">
 				 		<label for="accountT">通信地址:</label>
 				 	</td>
 				 	<td>
 				 		<input type="text" class="form-control"  id="address3" name="address" placeholder="">
 				 	</td>
 				 </tr>
 				 <tr>
 				 	<td>
 				 		<label for="accountT">微信标识号:</label>
 				 	</td>
 				 	<td>
 				 		<input type="text" class="form-control"  id="openid1" name="openid">
 				 	</td>
 				 	<td>
 				 		<label for="accountT">微信状态:</label>
 				 	</td>
 				 	<td>
 				 		<input type="text" class="form-control"  id="wechat_status1" name="wechat_status">
 				 	</td>
 				 </tr>
 				 <tr>
 				 	<td>
 				 		<label for="accountT">注册方式:</label>
 				 	</td>
 				 	<td>
 				 		<input type="text" class="form-control"  id="enroll_mode1" name="enroll_mode">
 				 	</td>
 				 	<td>
 				 		<label for="accountT">注册时间:</label>
 				 	</td>
 				 	<td>
 				 		<input type="text" class="form-control"  id="enroll_time1" name="enroll_time">
 				 	</td>
 				 </tr>
 				 <tr>
 				 	<td align="right">
 				 		<label for="accountT">备注:</label>
 				 	</td>
 				 	<td colspan="3">
 				 		<input type="text"  class="form-control"  id="remark3" name="remark"/>
 				 	</td>
 				 	
 				 </tr>
			</table>
      		<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				<!--<button type="button" class="btn btn-primary" id="updatebtn2">保存</button>-->
			</div>
		</div>
		</div>
		</div>
		</form>
	</body>
</html>